<template>
  <a-modal
    :mask-closable="false"
    v-model:visible="visible"
    width="800"
    :on-before-ok="handleOk"
    ok-text="加入购物车"
    title-align="start"
    class="overflow-hidden"
    title="商品详情"
  >
    <div v-if="detailData" class="flex">
      <div class="w-1/2 mr-[50px]"><img :src="detailData.imgurl" alt="" /></div>
      <div>
        <div class="mb-[20px]">商品名称： {{ detailData.shopname }}</div>
        <div class="mb-[20px]">商品价格： {{ detailData.price }}</div>
        <a-input-number
          :style="{ width: '130px' }"
          placeholder="Please Enter"
          :default-value="0"
          :min="0"
          mode="button"
          v-model="shopNumber"
          class="input-demo"
        />
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Message } from "@arco-design/web-vue";
import { getshopCar, getshopdetail } from "@/api/shop";
import { userStore } from "@/store/index";

const props = defineProps({
  shopId: {
    type: Number,
    default: "",
  },
});
const detailData = ref();
const shopNumber = ref(0);
const visible = ref(false);
const handleOk = async () => {
  console.log(333);
  try {
    let res = await getshopCar({
      shopId: props.shopId,
      shopCarId: 1,
      shopNum: shopNumber.value,
    });
    if (res.code == 200) {
      Message.success("添加成功");
    }
  } catch (error) {
    console.error(error);
  }
};

const getList = async () => {
  try {
    let res = await getshopdetail({
      id: props.shopId,
    });
    if (res?.code == 200) {
      detailData.value = res.data;
      console.log(detailData.value);
    } else {
      Message.error("获取失败");
    }
  } catch (error) {
    console.error(error);
  }
};

userStore().getUser();

// const user = ref()
// user.value = userStore()
// watch(
//   () => props.id,
//   (v1) => {
//     if (v1) {
//       getList();
//     }
//   }
// );
getList();
</script>

<style scoped></style>
